<template>
	<view>
	<view class="order-detail-page" v-if="isShow">
		<custom-header title="订单详情"></custom-header>

		<view v-if="isSigle">
			<!-- 订单信息 -->
			<view class="item-container">
				<view class="item-hor-container" style="justify-content: space-between;">
					<text class="item-title">订单信息</text>
					<view class="order-status"
						:style="{ color: `${getStatusColor(order.status)}`, border: `2rpx solid ${getStatusColor(order.status)}`, backgroundColor: `${getStatusBgColor(order.status)}` }">
						{{ getStatusName(order.status) }}
					</view>
				</view>
				<view class="info-item">
					<view class="item-label">订单号</view>
					<view class="item-hor-container">
						<view class="item-value">{{ order.orderNo }}</view>
						<image src="/static/images/ic_copy.png" style="height: 24rpx; width: 24rpx; margin-left: 6rpx;"
							@click.stop="$app.toCopy(order.orderNo)"></image>
					</view>
				</view>
				<view class="info-item">
					<view class="item-label">卡号</view>
					<view class="item-hor-container">
						<view class="item-value">{{ order.cardNum ? order.cardNum : "-" }}</view>
						<image src="/static/images/ic_copy.png" style="height: 24rpx; width: 24rpx; margin-left: 6rpx;"
							@click.stop="$app.toCopy(order.cardNum)"></image>
					</view>
				</view>
				<view class="info-item">
					<view class="item-label">卡密</view>
					<view class="item-hor-container">
						<view class="item-value">{{ order.cardPwd }}</view>
					</view>
				</view>
				<view class="info-item">
					<view class="item-label">订单类型</view>
					<view class="item-value">{{ order.submitType }}</view>
				</view>
			</view>

			<!-- 产品信息 -->
			<view class="item-container">
				<view class="item-title">产品信息</view>

				<view class="info-item">
					<view class="item-label">产品类型</view>
					<view class="item-value">{{ order.prodName }}</view>
				</view>

				<view class="item-hor-container" style="margin-bottom: 20rpx;">
					<view style="flex: 1;">
						<view class="item-label">提交面值</view>
						<view class="item-value">￥{{ order.faceValue }}</view>
					</view>
					<view style="flex: 1;">
						<view class="item-label">提交折扣</view>
						<view class="item-value">{{ order.rate }}%</view>
					</view>
				</view>

				<view class="item-hor-container" style="margin-bottom: 20rpx;">
					<view style="flex: 1;">
						<view class="item-label">实际可得</view>
						<view class="item-value">￥{{ order.amount ? order.amount : '-' }}</view>
					</view>
					<view style="flex: 1;">
						<view class="item-label">提交时间</view>
						<view class="item-value">{{ order.submitTime }}</view>
					</view>
				</view>

				<view class="item-hor-container" style="margin-bottom: 20rpx;">
					<view style="flex: 1;">
						<view class="item-label">结算状态</view>
						<view class="item-value">{{ getSettStatus(order.settStatus) }}</view>
					</view>
					<view style="flex: 1;">
						<view class="item-label">结算时间</view>
						<view class="item-value">{{ order.settTime ? order.settTime : '-' }}</view>
					</view>
				</view>
			</view>

			<!-- 失败原因 -->
			<view class="item-container" v-if="order.status == 3">
				<view class="item-title">失败原因</view>

				<view class="info-item">
					<view class="item-label">{{ order.notes }}</view>
				</view>
			</view>
		</view>

		<!-- 批量订单 -->
		<view v-else>
			<view class="item-container">
				<view class="item-hor-container" style="justify-content: space-between;">
					<text class="item-title">订单信息</text>
					<view class="order-status"
						:style="{ color: `${getFetchStatusColor(order.handleStatus)}`, border: `2rpx solid ${getFetchStatusColor(order.handleStatus)}`, backgroundColor: `${getFetchStatusBgColor(order.handleStatus)}` }">
						{{ getFetchStatusName(order.handleStatus) }}
					</view>
				</view>

				<view class="info-item">
					<view class="item-label">订单号</view>
					<view class="item-hor-container">
						<view class="item-value">{{ order.batchNo }}</view>
						<image src="/static/images/ic_copy.png" style="height: 24rpx; width: 24rpx; margin-left: 6rpx;"
							@click.stop="$app.toCopy(order.batchNo)"></image>
					</view>
				</view>

				<view class="item-hor-container" style="margin-bottom: 20rpx;">
					<view style="flex: 1;">
						<view class="item-label">订单数量</view>
						<view class="item-value">{{ order.totalNum }}</view>
					</view>
					<view style="flex: 1;">
						<view class="item-label">提交时间</view>
						<view class="item-value">{{ order.createTime }}</view>
					</view>
				</view>
			</view>
			
			<view class="item-container">
				<view class="item-title">订单信息</view>
			
				<view class="item-hor-container" style="margin-bottom: 20rpx;">
					<view style="flex: 1;">
						<view class="item-label">产品类型</view>
						<view class="item-value">{{ order.prodName }}</view>
					</view>
					<view style="flex: 1;">
						<view class="item-label">提交折扣</view>
						<view class="item-value">{{ order.rate }}折</view>
					</view>
				</view>
				
				<view class="item-hor-container" style="margin-bottom: 20rpx;">
					<view style="flex: 1;">
						<view class="item-label">成功数量</view>
						<view class="item-value">{{ order.succNum }}</view>
					</view>
					<view style="flex: 1;">
						<view class="item-label">失败数量</view>
						<view class="item-value">{{ order.failNum }}</view>
					</view>
				</view>
				
				<view class="item-hor-container" style="margin-bottom: 20rpx;">
					<view style="flex: 1;">
						<view class="item-label">成功金额</view>
						<view class="item-value">￥{{ order.mercSettAmt ? order.mercSettAmt : '-' }}</view>
					</view>
					<view style="flex: 1;">
						<view class="item-label">结算金额</view>
						<view class="item-value">￥{{ order.mercSettAmt ? order.mercSettAmt : '-' }}</view>
					</view>
				</view>
			</view>
			
			<view class="item-container" v-for="(item, index) in singleOrder" :key="index">
				<view class="item-hor-container" style="justify-content: space-between;">
					<text class="item-title">卡号：{{item.cardNum ? item.cardNum : '-'}}</text>
					<view class="order-status"
						:style="{ color: `${getStatusColor(item.status)}`}">
						{{ getStatusName(item.status) }}
					</view>
				</view>
			
				<view class="item-hor-container" style="margin-bottom: 20rpx;">
					<view style="flex: 1;">
						<view class="item-label">卡密：{{item.cardPwd}}</view>
					</view>
					<view style="flex: 1;">
						<view style="font-size: 20rpx;">提交时间：{{item.submitTime}}</view>
					</view>
				</view>
				
				<view style="margin-top: 40rpx; background-color: #F6F6F6;  padding: 32rpx; border-radius: 12rpx;">
					<view class="item-hor-container" style="margin-bottom: 20rpx;">
						<view style="flex: 1;">
							<view class="item-label" style="font-size: 24rpx;">真实面值</view>
						</view>
						<view style="flex: 1; text-align: right;">
							<view class="item-label" style="font-size: 24rpx;">￥{{item.actualFaceValue ? item.actualFaceValue : '-'}}</view>
						</view>
					</view>
					
					<view class="item-hor-container" style="margin-bottom: 20rpx;">
						<view style="flex: 1;">
							<view class="item-label" style="font-size: 24rpx;">实际可得</view>
						</view>
						<view style="flex: 1; text-align: right;">
							<view class="item-label" style="font-size: 24rpx;">￥{{item.amount ? item.amount : '-'}}</view>
						</view>
					</view>
					
					<view class="item-hor-container" style="margin-bottom: 20rpx;">
						<view style="flex: 1;">
							<view class="item-label" style="font-size: 24rpx;">结算状态</view>
						</view>
						<view style="flex: 1; text-align: right;">
							<view class="item-label" style="font-size: 24rpx;">{{getSettStatus(item.settStatus)}}</view>
						</view>
					</view>
					
					<view class="item-hor-container">
						<view style="flex: 1;">
							<view class="item-label" style="font-size: 24rpx;">结算时间</view>
						</view>
						<view style="flex: 1; text-align: right;">
							<view class="item-label" style="font-size: 24rpx;">{{item.settTime ? item.settTime : '-'}}</view>
						</view>
					</view>
				</view>
				
			</view>
			
		</view>
	</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				order: {},
				singleOrder: [],//单卡数组
				isSigle: true,
				fetchOrderNo: "",
				isShow: uni.getStorageSync("isShow"),
			};
		},
		onLoad(options) {
			// 获取订单ID
			this.isSigle = options.isSigle === 'true';
			this.order = JSON.parse(decodeURIComponent(options.order));
			this.fetchOrderNo = this.order.batchNo;
			this.fetchOrders();
		},
		methods: {
			goBack() {
				uni.navigateBack();
			},
			getStatusColor(status) {
				if (status == 1) return '#6AE8BD';
				if (status == 2) return '#FC926A';
				if (status == 3) return '#FA5151';
				return '#000';
			},
			getStatusBgColor(status) {
				if (status == 1) return '#EEFAF6';
				if (status == 2) return '#FFEBE3';
				if (status == 3) return '#FDE8E8';
				return '#000';
			},
			// 获取订单状态
			getStatusName(status) {
				if (status == 1) return '成功';
				if (status == 2) return '处理中';
				if (status == 3) return '失败';
				return '成功';
			},
			getFetchStatusColor(status) {
				if (status == 1) return '#FC926A';
				if (status == 2) return '#6AE8BD';
				return '#000';
			},
			getFetchStatusBgColor(status) {
				if (status == 1) return '#FFEBE3';
				if (status == 2) return '#EEFAF6';
				return '#000';
			},
			// 获取订单状态
			getFetchStatusName(status) {
				if (status == 1) return '处理中';
				if (status == 2) return '已完成';
				return '成功';
			},
			// 获取结算状态
			getSettStatus(status) {
				return status == 1 ? '已结算' : '未结算';
			},
			// 请求订单数据 states 0=初始化 1=刷新 2=加载
			async fetchOrders(states) {
				const res = await this.$http({
					method: 'POST',
					url: `/order/list?pageNum=1&pageSize=100`,
					data: {
						batchNo: this.fetchOrderNo
					}
				});
			
				if (res) {
					this.singleOrder = res.rows
				}
			},
		}
	};
</script>

<style lang="scss" scoped>
	.order-detail-page {
		background-color: #F7FAFF;
		height: 100vh;
	}

	.item-container {
		background-color: white;
		border-radius: 12rpx;
		padding: 26rpx 36rpx;
		margin: 20rpx 24rpx;
	}

	.item-hor-container {
		display: flex;
		align-items: center;
	}

	.info-item {
		margin-bottom: 20rpx;
	}

	.item-title {
		font-size: 28rpx;
		color: #000;
		font-weight: bold;
		margin-bottom: 20rpx;
	}

	.order-status {
		font-size: 20rpx;
		padding: 6rpx 18rpx;
		margin-right: 10px;
		border-radius: 10rpx;
	}

	.item-label {
		font-size: 28rpx;
		color: rgba(0, 0, 0, 0.60);
		margin-bottom: 8rpx;
	}

	.item-value {
		font-size: 28rpx;
		color: #000;
	}

	.item-state {
		margin-bottom: 20rpx;
	}
</style>